<template>
  <div @click="click">
    <el-icon :size="20">
      <FullScreen v-if="!isFullscreen" />
      <Aim v-else />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { FullScreen, Aim } from '@element-plus/icons-vue'

const isFullscreen = ref(false)

const click = () => {
  if (!document) {
    ElMessage.error('您的浏览器不支持全屏功能')
    return false
  }
  
  if (!isFullscreen.value) {
    requestFullScreen()
  } else {
    exitFullScreen()
  }
}

const requestFullScreen = () => {
  const element = document.documentElement
  if (element.requestFullscreen) {
    element.requestFullscreen()
    return
  }
  ElMessage.error('您的浏览器不支持全屏功能')
}

const exitFullScreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  }
}

const change = () => {
  isFullscreen.value = !!(
    document.fullscreenElement ||
    (document as any).webkitFullscreenElement ||
    (document as any).mozFullScreenElement ||
    (document as any).msFullscreenElement
  )
}

onMounted(() => {
  document.addEventListener('fullscreenchange', change)
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', change)
})
</script>

<style scoped></style>
